<template>
  <div class="page-container" v-loading="loading" v-loadingCommonStyle>
    <ex_header_spiler :title="$tt('label_tms_waybill_order_info')" />
    <ex_super_desc :model="baseOption" :data="form" size="default" direction="vertical" :attrs="$defaultDetailDescAttrs" border
      class="desc_flex_row" labelClassName="flex_cell" contentClassName="flex_cell"></ex_super_desc>

    <ex_header_spiler :title="$tt('label_sku_info')" />
    <ex_super_table v-bind="containerDetailsOption" :data="form.omsPurchaseOrderDetailChangeList"
      ref="containerDetailsRef" />


  </div>
</template>
<script>


import router_params from '@/mixin/router_params';

export default {

  title: "label_purchase_change_detail",
  mixins: [router_params],
  data() {
    return {
      loading: false,

      form: {},
      baseOption: [
        {
          key: "code",
          label: "label_purchase_change_order_code",
        },
        {
          key: "purchaseOrderCode",
          label: "label_purchase_order_code",
        },
        {
          key: "customerName",
          label: "label_customer",
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.customerCode),
        },
        {
          key: "supplierName",
          label: "label_supplier",
        },
        {
          key: 'purchaseType',
          label: "label_purchase_purchase_type",
          formatter: (r, c, v, i) => this.$enumShow(v, "PurchasePlatformTypeEnum"),
        },
        {
          key: "orderNo",
          label: "label_waybill_code",
          render: (h, { data }) => {
            let divStr = ''
            if (data.omsPurchaseWaybillList) {
              divStr = data.omsPurchaseWaybillList.map(item => {
                return <div>{this.$enumShow(item.logisticsSupplier, "PurchaseOrderLogisticsEnum")}: {item.trackingNumber}</div>
              })
            }
            return (
              <div>
                <div>
                  {data.orderNo ? `${data.purchaseSource}:${data.orderNo}` : ''}
                </div>
                <div>
                  {divStr}
                </div>
              </div>
            );
          },
        },
        {
          key: "platformOrderNo",
          label: "label_platform_order_1688",
        },
        {
          key: "warehouseName",
          label: "label_warehouse_name",
        },
        {
          key: "purchaser",
          label: "label_sku_buyer",
        },
        {
          key: "newTotalAmount",
          label: "label_payment_amount",
          render: (h, { data }) => {
            return (
              <div>
                  <div class="red">
                    {this.$t('label_purchase_new')}：{data.newTotalAmount}
                  </div>
                  <div>
                    {this.$t('label_purchase_original')}：{data.totalAmount}
                  </div>
                </div>
            );
          },
        },
        {
          key: "changeStatus",
          label: "label_change_status",
          formatter: (r, c, v, i) =>
            this.$enumShow(v, "PurchaseAuditStatusEnum"),
        },
        {
          key: "purchaseFreight",
          label: "label_tms_freight",
          render: (h, { data }) => {
            return (
              <div>
                  <div class="red">
                    {this.$t('label_purchase_new')}：{data.newPurchaseFreight}
                  </div>
                  <div>
                    {this.$t('label_purchase_original')}：{data.purchaseFreight}
                  </div>
                </div>
            );
          },
        },
        {
          key: "otherCost",
          label: "label_purchase_other_cost",
          render: (h, { data }) => {
            return (
              <div>
                  <div class="red">
                    {this.$t('label_purchase_new')}：{data.newOtherCost}
                  </div>
                  <div>
                    {this.$t('label_purchase_original')}：{data.otherCost}
                  </div>
                </div>
            );
          },
        },
        {
          key: "newPredictDay",
          label: "label_expected_arrival",
          // formatter: (r, c, v, i) => this.$dateFormat(v)
          formatter: (r, c, v, i) => v?this.$t('label_day_within', [v]):'-',
          render: (h, { data }) => {
            return (
              <div>
                  <div class="red">
                    {this.$t('label_purchase_new')}：{data.newPredictDay?this.$t('label_day_within', [data.newPredictDay]):'-'}
                  </div>
                  <div>
                    {this.$t('label_purchase_original')}：{data.predictDay?this.$t('label_day_within', [data.predictDay]):'-'}
                  </div>
                </div>
            );
          },
        },

        {
          key: "changeReasons",
          label: "label_reasons_change",
        },
        {
          key: "changeRemark",
          label: "label_reject_reason",
        },
        {
          key: "remark",
          label: "label_remark",
        },
      ],
      containerDetailsOption: {
        model: [

          { key: 'skuName', label: 'label_sku_name', 'show-overflow-tooltip': true, },
          { key: 'skuNameEn', label: 'label_sku_name_en', 'show-overflow-tooltip': true, },
          {
            key: 'purchasePrice', label: 'label_purchase_unit_price', 'show-overflow-tooltip': true,
            render: (h, { row }) => {
              return (
                <div>
                  <div class="red">
                    {this.$t('label_purchase_new')}：{row.newPurchasePrice}
                  </div>
                  <div>
                    {this.$t('label_purchase_original')}：{row.purchasePrice}
                  </div>
                </div>
              );
            },
          },
          {
            key: 'purchaseQty', label: 'label_count', 'show-overflow-tooltip': true,
            render: (h, { row }) => {
              return (
                <div>
                  <div class="red">
                    {this.$t('label_purchase_new')}：{row.newPurchaseQty}
                  </div>
                  <div>
                    {this.$t('label_purchase_original')}：{row.purchaseQty}
                  </div>
                </div>
              );
            },
          },
          {
            key: 'purchaseTotalPrice', label: 'label_purchase_subtotal', 'show-overflow-tooltip': true,
            render: (h, { row }) => {
              return (
                <div>
                  <div class="red">
                    {this.$t('label_purchase_new')}：{row.newPurchaseTotalPrice}
                  </div>
                  <div>
                    {this.$t('label_purchase_original')}：{row.purchaseTotalPrice}
                  </div>
                </div>
              );
            },
          },
          { key: 'currencyCode', label: 'label_currency_kind',formatter: (r, c, v, i) => this.$enumShow(v, "CurrencyTypeEnum"), 'show-overflow-tooltip': true, },
          {
            key: "changeOperationType",
            label: "label_operate_type",
            formatter: (r, c, v, i) => this.$enumShow(v, "PurchaseChangeOperationTypeEnum"),
          },
        ],
      }
    };
  },

  methods: {
    init_data_default(into_params) {
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: '/oms-api/purchase/OmsPurchaseChangeOrderRpc/selectDetail.json',
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            this.loading = false
            Object.assign(this.form, res.data)
            this.fixTabLabel()

          }
        })
      }
      this.fixTabLabel()
    },
    fixTabLabel() {
      this.$emit("tagModifyLabel", {
        _key: 'label_name_code',
        name: this.$t("label_purchase_change_detail"),
        code: this.form.id || ""
      })
    },

  }
};

</script>
<style></style>
